<!-- 配置项编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="800"
    :model-value="modelValue"
    :title="isUpdate ? '编辑配置项' : '新增配置项'"
    @update:model-value="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="94px">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="配置项标题" prop="title">
            <el-input
              v-model="form.title"
              clearable
              :maxlength="50"
              placeholder="请输入配置项标题"
            />
          </el-form-item>
          <el-form-item label="配置项编码" prop="code">
            <el-input
              v-model="form.code"
              clearable
              :maxlength="50"
              placeholder="请输入配置项编码"
            />
          </el-form-item>
          <el-form-item label="排序号" prop="sort">
            <el-input-number
              v-model="form.sort"
              :min="0"
              :max="9999"
              placeholder="请输入排序号"
              controls-position="right"
              class="ele-fluid"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="form.note"
              :rows="2"
              type="textarea"
              :maxlength="500"
              placeholder="请输入备注"
              :autosize="{ minRows: 2, maxRows: 6 }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型" prop="type">
            <el-select
              v-model="form.type"
              clearable
              class="ele-block"
              filterable
              placeholder="请选择配置类型"
            >
              <el-option label="只读文本" value="readonly" />
              <el-option label="数字" value="number" />
              <el-option label="单行文本" value="text" />
              <el-option label="多行文本" value="textarea" />
              <!-- <el-option label="数组" value="array" />
              <el-option label="密码" value="password" /> -->
              <el-option label="单选框" value="radio" />
              <el-option label="复选框" value="checkbox" />
              <el-option label="下拉框" value="select" />
              <!-- <el-option label="字体图标" value="icon" /> -->
              <el-option label="日期" value="date" />
              <el-option label="时间" value="datetime" />
              <el-option label="单张图片" value="image" />
              <el-option label="多张图片" value="images" />
              <!-- <el-option label="单个文件" value="file" />
              <el-option label="多个文件" value="files" /> -->
              <el-option label="富文本编辑器" value="ueditor" />
            </el-select>
          </el-form-item>
          <el-form-item label="配置项值" prop="value">
            <el-input
              v-model="form.value"
              :rows="2"
              type="textarea"
              placeholder="请输入配置项值"
              :autosize="{ minRows: 2, maxRows: 6 }"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="正常" :value="1" />
              <el-radio label="停用" :value="2" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import {
  updateConfigData,
} from '@/api/system/config'
import { message, useFormData } from '@/utils/index'
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object,
  /** 字典id */
  configId: Number,
})

const emit = defineEmits(['done', 'update:modelValue'])

/** 是否是修改 */
const isUpdate = ref(false)

/** 提交状态 */
const loading = ref(false)

/** 表单实例 */
const formRef = ref(null)

/** 表单数据 */
const { form, resetFields, assignFields } = useFormData({
  id: undefined,
  title: '',
  code: '',
  value: '',
  sort: 0,
  type: 'text',
  note: '',
  status: 1,
})

/** 表单验证规则 */
const rules = reactive({
  title: [
    {
      required: true,
      message: '请输入配置项标题',
      type: 'string',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入配置项编码',
      type: 'string',
      trigger: 'blur',
    },
  ],
  type: [
    {
      required: true,
      message: '请输入配置项类型',
      type: 'string',
      trigger: 'change',
    },
  ],
  sort: [
    {
      required: true,
      message: '请输入排序号',
      type: 'number',
      trigger: 'blur',
    },
  ],
})

/** 保存编辑 */
function save() {
  formRef.value?.validate?.((valid) => {
    if (!valid)
      return

    loading.value = true

    updateConfigData({
      ...form,
      config_id: props.configId,
    })
      .then((res) => {
        message(res.msg, res.success)
        updateModelValue(false)
        emit('done')
      })
      .finally(() => {
        loading.value = false
      })
  })
}

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}

watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
      if (props.data) {
        assignFields(props.data)
        isUpdate.value = true
      }
      else {
        isUpdate.value = false
      }
    }
    else {
      resetFields()
      formRef.value?.clearValidate?.()
    }
  },
)
</script>
